<script setup lang="ts">
import { onMounted } from 'vue';
import { useUserStore } from '@/stores/user'
import { useMenuStore } from '@/stores/menu'
import { indexApi } from '@/api/index'
import ModuleMenu from '@/layouts/menu.vue'
import ModuleHeader from '@/layouts/header.vue'

const userStore = useUserStore();
const menuStore = useMenuStore();

// 组件挂载完成后执行
onMounted(() => {
    onInit();
})

/**
 * 初始化
 */
const onInit = () => {
    if (menuStore.indexInitSuccess) { return; }

    indexApi()
        .then((res) => {
            // 用户信息
            let adminInfo = res.data.adminInfo;
            userStore.user.name = adminInfo.name;
            userStore.user.avatar = adminInfo.avatar;
            userStore.user.lastLoginTime = adminInfo.lastLoginTime;

            // 菜单信息
            menuStore.menus.push(...res.data.menus);
            menuStore.initTab();
            menuStore.indexInitSuccess = true;
        }).catch((error) => {

        })
}
</script>

<template>
    <el-container class="layout-container">
        <el-aside class="layout-aside">
            <ModuleMenu />
        </el-aside>
        <el-container>
            <!-- 头部 -->
            <el-header>
                <ModuleHeader />
            </el-header>
            <!-- 内容 -->
            <el-main>
                <RouterView />
            </el-main>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
    width: 100%;
    height: 100%;
}

.layout-aside {
    width: var(--ha-aside-width);
    margin: 16px 0 16px 16px;
    background-color: var(--ha-content-bg-color);
    border-radius: var(--el-border-radius-base);
    box-shadow: var(--el-box-shadow-light);
    transition: width .3s ease;
}
</style>